<template>
  <div class="table">
    <div class="handle-box">
      <div class="handle-deposit">
        <img src="@/assets/images/deposit.png" alt>
        <span>我的余额（元）</span>
        <div>
          <b>9</b>
          <b>1</b>
          <b>9</b>
        </div>
        <a>
          查看服务费
          <i class="el-icon-arrow-right"></i>
        </a>
      </div>
      <div class="handle-filter clearfix">
        <div class="fl">
          <div class="filter-item">
            <form class="filter-search" action>
              <input type="text" placeholder="请输入商品名称查询" maxlength="15">
              <button>
                <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
        <div class="fr">
          <div class="filter-item filter-item-last">
            <el-date-picker
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>

    <el-table
      :data="tableData"
      border
      class="table"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="money" label="金额"></el-table-column>
      <el-table-column prop="fee" label="商家服务费"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="number" label="票券单号"></el-table-column>
      <el-table-column prop="creatTime" label="创建时间" width="160"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="seeForm(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗  核销详情 -->
    <el-dialog title="收货地址" :visible.sync="dialogDetails" width="600px">
      <div class="dialog-box">
        <el-form label-width="130px" label-position="right">
          <el-form-item label="活动名称：">
            <span>212131231</span>
          </el-form-item>
          <el-form-item label="券内容：">
            <span>鱼香肉丝</span>
          </el-form-item>
          <el-form-item label="用户手机号：">
            <span>182****1231</span>
          </el-form-item>
          <el-form-item label="核销状态：">
            <span>已核销</span>
          </el-form-item>
          <el-form-item label="核销时间：">
            <span>2019-05-02 11:42:10</span>
          </el-form-item>
          <el-form-item label="核销员：">
            <span>186****1251</span>
          </el-form-item>
          <el-form-item label="商家服务费：">
            <span>-¥0.5</span>
          </el-form-item>
          <el-form-item label="商家提现金额：">
            <span>¥10.5</span>
          </el-form-item>
          <el-form-item label="支付方式：">
            <span>微信支付</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetails = false">取 消</el-button>
        <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "1",
          type: "转入",
          money: "¥10.5",
          fee: "¥10.5",
          remark: "砍价拼菜",
          number: "2131231221",
          creatTime: "2019-05-01 11:42:10"
        }
      ],
      dialogDetails: false
    };
  },
  methods: {
    //查看详情
    seeForm() {
      this.dialogDetails = true;
    }
  }
};
</script>

<style scoped lang="scss">
.handle-deposit {
  width: 100%;
  height: 100px;
  background: linear-gradient(
    90deg,
    rgba(243, 147, 45, 1) 0%,
    rgba(255, 223, 153, 1) 100%
  );
  display: flex;
  align-items: center;
  img {
    margin-left: 40px;
  }
  span {
    font-size: 20px;
    color: #fff;
    margin: 0 40px;
  }
  div {
    flex: 1;
    b {
      display: inline-block;
      width: 62px;
      height: 48px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      margin-right: 10px;
      color: #fff;
      text-align: center;
      line-height: 48px;
      font-size: 24px;
    }
  }
  a {
    display: inline-block;
    width: 166px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    color: #B3803F;
    font-size: 18px;
    margin-right: 150px;
    cursor: pointer;
  }
}
.dialog-box {
  width: 300px;
  margin: 0 auto;
}
</style>

